// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'



// 引入css文件
import "./index.css"

//组件通讯的三种方式
// 父组件 ->子组件
// 子组件->父组件 
// 兄弟组件


//父组件提供要传递的state数据
//给子组件标签添加属性 值为state中的数据
//子组件中通过props 接收父组件中传递的数据



class Parent extends React.Component {
    // 建议使用构造器 接收props
    state = { lastName: '王' }
    render() {
        // const { props } = this
        return (
            <div>
                传递数据给子组件:
                <br />
                {this.state.lastName}
                <Child name={this.state.lastName} />
            </div>
        )
    }
}


class Child extends React.Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    render() {
        const { props } = this
        return (
            <div>
                接收父组件传递的数据:
                <br />
                {props.name}
            </div>
        )
    }
}


//3 渲染react元素
ReactDOM.render(<Parent
    tag={<p>这是段落</p>}
    fn={() => console.log("这是一个函数")}
    colors={['red', 'blue', 'greens']}
    name='jack'
    age={12} />,
    document.getElementById('root'))
